<template>
    <div class="recharge-face">
        <div class="nowts clearfix">
            <p class="fl"> 我的余额:</p>
            <p class="fr">{{userInfow.accountBalance}}元</p>
        </div>
        <div class="boxs">
            <ul class="clearfix">
                <li class="fl" v-for="(item,index) in list" @click="getArry.amount=item.amount" :class="{'active':getArry.amount==item.amount}">
                    <p class="type">{{item.caption}}</p>
                    <p class="money">
                        <span>{{item.amount}}</span>
                        <span>元</span>
                    </p>
                </li>
            </ul>
            <div class="liste clearfix">
                <p class="fl" v-for="(item,index) in list" :class="{'currty':getArry.amount==item.amount}">{{item.amount}}元</p>
            </div>
        </div>
        <div class="heights">
            <span>支付方式</span>
            <p @click="getArry.pay_type='wx'">
                <button class="wechat"><input name="pay" type="radio" checked="getArry.pay_type='wx'"></button>
            </p>
            <p @click="getArry.pay_type='hxzf'">
                <button class="hxzf"><input name="pay" type="radio"></button>
            </p>
            <p @click="getArry.pay_type='zfb'">
                <button class="zfb"><input name="pay" type="radio"></button>
            </p>

        </div>

        <div class="btn" @click="gotoRecords(getArry.amount,userToken,getArry.pay_type)">确定支付</div>

        <form id="form" action="" method="post">
            <input id="pGateWayReq" name="pGateWayReq" type="hidden" />
        </form>

    </div>
</template>

<script>
import http from "@/assets/js/axios";
import httpr from "@/assets/js/axiosr";
import { domain } from '@/assets/js/config'
import $ from 'jquery'
import { Toast } from 'mint-ui';
import { maskTips, maskCallback } from '@/assets/js/dom'
export default {
    data() {
        return {
            userInfow: '',
            userToken: '',
            amounts: '100',
            list: [],
            getArry: {
                pay_type: 'wx',
                amount: '1000',
            },
            lists: '',
            valst: ''
        }
    },
    components: {

    },
    mounted() {
        var that = this
        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        this.getReason();
        this.getList();
        maskCallback(function () {
            that.$router.push('/userinfo')
        }, 'comp-mask-btnAleft-gotoshiming', 'comp-mask-btnAright')
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },

        // 用户信息
        getReason: async function () {
            const res = await http.post('xshk/f/assets/query?token=' + this.userToken)
            if (res.data.code == -5) {
                maskTips({ id: "bal-fail", txt: res.data.message })
                this.$router.push('/login')
                return false;
            }
            if (res.data.code == 0) {
                this.userInfow = res.data.data
            }
        },
        // 用户信息
        getList: async function () {
            const res = await http.post('xshk/f/assets/queryRechargeList?token=' + this.userToken)
            console.log(res);
            if (res.data.code == 0) {
                this.list = res.data.data
            }
        },
        // 充值
        gotoRecords: function (pid, token, type) {
            console.log(this.getArry);
            // 是否实名

            let statu = localStorage.getItem("uthenticationStatus") || ''
            // if (statu == 2) {
            //     maskTips({ id: "payfail" + new Date().getTime(), title: '温馨提示', btnCls: 'comp-mask-btnAleft-gotoshiming', btnTxt: '确认', btnTxt2: '取消', txt: "请先去实名" })
            //     // this.$router.push('/userinfo')
            //     return false;
            // }

            // 充值
            // if (this.getArry.amount < 0.01) {
            //     maskTips({ id: "too-littlecash-1", txt: "提现金额不能小于0.1元" })
            // } else {
            if (type == 'wx') {
                var userAgent = navigator.userAgent.toLowerCase();
                if (/micromessenger/gi.test(userAgent)) {
                    window.open(domain + "/xshk/f/assets/goWxPay?token=" + this.userToken + "&amount=" + this.getArry.amount, '_parent')
                } else {
                    $.ajax({
                        url: domain + "/xshk/f/assets/wxRecharge?token=" + this.userToken + "&amount=" + this.getArry.amount,
                        data: { 'assetsType': 1 },
                        type: "get",
                        dataType: "json",
                        xhrFields: { withCredentials: true },
                        crossDomain: true,
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        success: function (data) {
                            // console.log(data.data)
                            if (data) {
                                window.open(data.data.mwebUrl, '_parent')
                            } else {
                                console.log("数据为空");
                            }
                        },
                        error: function () {
                            console.log("失败");
                        }

                    })
                }
            } else if (type == 'hxzf') {
                if (statu == 2) {
                    maskTips({ id: "payfail" + new Date().getTime(), title: '温馨提示', btnCls: 'comp-mask-btnAleft-gotoshiming', btnTxt: '确认', btnTxt2: '取消', txt: "请先去实名" })
                    // this.$router.push('/userinfo')
                    return false;
                }
                $.ajax({
                    url: domain + "/xshk/f/assets/recharge?token=" + this.userToken + "&amount=" + this.getArry.amount + "&pay_type=" + this.getArry.pay_type,
                    data: { 'assetsType': 1 },
                    type: "post",
                    dataType: "json",
                    xhrFields: { withCredentials: true },
                    crossDomain: true,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },

                    success: function (data) {
                        // console.log(data);
                        if (data.code == 0) {
                            $("#form").attr("action", data.data.ipsUrl);
                            $("#pGateWayReq").val(data.data.pGateWayReq);
                            document.getElementById("form").submit();
                        } else {
                            maskTips({ id: "too-littlecash-2", txt: data.message })
                        }
                    },
                    error: function () {
                        console.log("失败");
                    }

                })
            } else if (type == 'zfb') {
                this.$router.push({ path: '/rechargeMange', query: { 'amount': pid, 'userToken': token, 'assetsType': 1 } })
            }
            //}
        }
    }
}
</script>

<style lang="stylus"  scoped>
.recharge-face {
    background-color: #f0f0f0;
    height: 100%;

    .nowts {
        padding: 0 15px;
        height: 45px;
        line-height: 45px;
        width: 100%;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .boxs {
        ul {
            padding: 12px;
            background-color: #fff;

            li {
                width: 117px;
                height: 70px;
                font-size: 14px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
                background: url('../../assets/imgs/recharge/bgc-w.png') no-repeat;
                background-size: 100%;

                p.type {
                    text-align: right;
                    margin-top: 5px;
                    margin-right: 10px;
                    font-size: 12px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(102, 102, 102, 1);
                }

                p.money {
                    font-size: 12px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);
                    margin-left: 10px;
                    margin-top: 8px;

                    span:nth-child(1) {
                        font-size: 24px;
                    }
                }
            }

            .active {
                background: url('../../assets/imgs/recharge/bgc-a.png') no-repeat;
                background-size: 100%;
            }
        }

        div.liste {
            width: 100%;
            padding: 0 20px;
            background-color: #fff;

            p {
                text-align: center;
                width: 55px;
                height: 30px;
                line-height: 30px;
                font-size: 12px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
            }

            .currty {
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(254, 0, 0, 1);
                border-bottom: 2px solid rgba(254, 0, 0, 1);
            }
        }
    }

    .heights {
        width: 100%;
        // height: 1.98rem;
        padding: 0.1rem 0.4rem;
        box-sizing: border-box;

        span {
            font-size: 16px;
            font-family: SourceHanSansCN-Regular;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
        }

        button {
            position: relative;

            input {
                width: 20px;
                height: 20px;
                position: absolute;
                top: -3px;
                left: -30px;
            }
        }

        .zfb {
            padding: 0;
            width: 1.7rem;
            height: 0.6rem;
            border: none;
            outline: none;
            background: url('../../assets/imgs/recharge/zfb.png') no-repeat;
            margin-left: 0.7rem;
            background-size: 100% 100%;
        }

        .wechat {
            padding: 0;
            width: 1.7rem;
            height: 0.6rem;
            border: none;
            outline: none;
            background: url('../../assets/imgs/recharge/wechat.png') no-repeat;
            margin-left: 0.7rem;
            background-size: 100% 100%;
        }

        .hxzf {
            padding: 0;
            width: 2.4rem;
            height: 0.6rem;
            border: none;
            outline: none;
            background: url('../../assets/imgs/recharge/hxzf.png') no-repeat;
            margin-left: 0.7rem;
            background-size: 100% 100%;
        }
    }

    div.btn {
        float: left;
        width: 88.5%;
        height: 1rem;
        line-height: 1rem;
        border: none;
        font-size: 0.35rem;
        text-align: center;
        background: #aad114;
        border-radius: 5px;
        color: #fff;
        margin-left: 0.48rem;
        margin-top: 0.48rem;
    }
}
</style>